<template>
  <div class="use-hook-container">
    <h1 class="text-3xl font-bold text-center mb-8">Vue3 Hook 使用演示</h1>

    <!-- Hook 分类说明 -->
    <div class="bg-indigo-50 border-l-4 border-indigo-500 p-6 mb-8 rounded-lg">
      <h2 class="text-xl font-semibold mb-4 text-indigo-800">🪝 Hook 分类介绍</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-indigo-700">
        <div>
          <h3 class="font-medium mb-2">基础 Hook</h3>
          <p class="text-sm">ref, reactive, computed, watch 等核心响应式 API</p>
        </div>
        <div>
          <h3 class="font-medium mb-2">生命周期 Hook</h3>
          <p class="text-sm">onMounted, onUnmounted 等组件生命周期管理</p>
        </div>
        <div>
          <h3 class="font-medium mb-2">自定义 Hook</h3>
          <p class="text-sm">封装复用逻辑，提高代码可维护性</p>
        </div>
      </div>
    </div>

    <!-- 演示区域 -->
    <div class="grid grid-cols-1 xl:grid-cols-2 gap-8">
      <!-- 1. 基础 Hook 演示 -->
      <div class="demo-section">
        <h3 class="demo-title">1. 基础 Hook (ref, reactive, computed, watch)</h3>
        <BasicHookDemo />
      </div>

      <!-- 2. 自定义计数器 Hook -->
      <div class="demo-section">
        <h3 class="demo-title">2. useCounter Hook</h3>
        <CounterHookDemo />
      </div>

      <!-- 3. 切换状态 Hook -->
      <div class="demo-section">
        <h3 class="demo-title">3. useToggle Hook</h3>
        <ToggleHookDemo />
      </div>

      <!-- 4. 窗口尺寸 Hook -->
      <div class="demo-section">
        <h3 class="demo-title">4. useWindowSize Hook</h3>
        <WindowSizeHookDemo />
      </div>
    </div>

    <!-- Hook 使用原则 -->
    <div class="mt-12 bg-green-50 border-l-4 border-green-500 p-6 rounded-lg">
      <h2 class="text-xl font-semibold mb-4 text-green-800">✨ Hook 使用原则</h2>
      <div class="text-green-700 space-y-2">
        <p>• <strong>封装复用逻辑</strong>：将重复的状态逻辑提取到自定义 Hook 中</p>
        <p>• <strong>单一职责</strong>：每个 Hook 只负责一个具体的功能</p>
        <p>• <strong>响应式设计</strong>：充分利用 Vue3 的响应式系统</p>
        <p>• <strong>生命周期管理</strong>：在 Hook 中妥善处理资源的创建和销毁</p>
        <p>• <strong>类型安全</strong>：使用 TypeScript 提供更好的类型提示和错误检查</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 导入演示组件 - 先只导入基本的组件
import BasicHookDemo from './components/BasicHookDemo.vue'
import CounterHookDemo from './components/CounterHookDemo.vue'
import ToggleHookDemo from './components/ToggleHookDemo.vue'
import WindowSizeHookDemo from './components/WindowSizeHookDemo.vue'

// 注释掉可能有问题的组件
// import LifecycleHookDemo from './components/LifecycleHookDemo.vue'
// import LocalStorageHookDemo from './components/LocalStorageHookDemo.vue'
// import DebounceHookDemo from './components/DebounceHookDemo.vue'
// import FetchHookDemo from './components/FetchHookDemo.vue'
</script>

<style scoped lang="scss">
.use-hook-container {
  @apply max-w-7xl mx-auto p-6;
}

.demo-section {
  @apply bg-white rounded-lg shadow-md overflow-hidden;
}

.demo-title {
  @apply text-lg font-semibold p-4 bg-gray-50 border-b;
}
</style>
